// 出库入库信息柱状图
export const infoOptions = (x, y1, y2) => {
  // 横坐标 x 入库纵坐标 y1 出库纵坐标 y2
  return {
    tooltip: {
      trigger: 'axis'
    },
    // 图例到容器上下左右的距离 对扇形图没用
    grid: {
      left: '5%',
      top: '5%',
      right: '5%',
      bottom: '5%'
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        // x横坐标 周 月  年
        data: x
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '入库',
        color: '#df842d',
        type: 'bar',
        // 入库 y纵坐标 y1
        data: y1,
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      },
      {
        name: '出库',
        color: '#dfb52d',
        type: 'bar',
        // 出库 y纵坐标 y2
        data: y2,
        markPoint: {
          data: [
            { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
            { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      }
    ]
  }
}

// 库存使用情况
export const stockService = (data) => {
  return {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        type: 'pie',
        // 调整圆的大小
        radius: ['40%', '60%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data
      }
    ]

  }
}

// 库区使用情况
export const utilizationOfArea = () => {
  // 数据
  const data = [
    { value: 348, name: '拣货区' },
    { value: 487, name: '出库区' },
    { value: 677, name: '暂存库区' },
    { value: 126, name: '进货暂存区' },
    { value: 198, name: '出货暂存区' }
  ]
  return {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      type: 'plain',
      orient: 'vertical',
      left: '50%',
      top: 'center',
      align: 'left',
      itemGap: 6,
      itemWidth: 10, // 设置宽度
      itemHeight: 10, // 设置高度
      icon: 'circle',
      symbolKeepAspect: false,
      formatter: (name) => {
      // formatter格式化函数动态呈现数据
        let total = 0 // 用于计算总数
        let target // 遍历拿到数据
        for (let i = 0; i < data.length; i++) {
          total += data[i].value
          if (data[i].name === name) { target = data[i].value }
        }
        const v = ((target / total) * 100).toFixed(2)
        return `{oneone|${name}}  {twotwo|${target}}   {threethree|${v}%}`
      //       富文本第一列样式应用 富文本第二列样式应用  富文本第三列样式应用
      }
    },
    textStyle: {
      // 文字的样式
      fontSize: 24, // 可控制每个legend项的间距
      color: '#828282',
      rich: {
        // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
        oneone: {
          // 设置第一列的样式 data中的name
          // 宽度 颜色 字体大小 字体粗细
          width: 100,
          color: '#000000',
          fontSize: 12,
          fontWeight: 'bolder'
        },
        twotwo: {
          // 设置第二列的样式 data中的value
          // 宽度 颜色 字体大小 字体粗细
          width: 35,
          color: '#333',
          fontSize: 12
        },
        threethree: {
          // 设置第三列的样式 value计算出来的百分比
          // 宽度 颜色 字体大小 字体粗细
          width: 20,
          color: '#333',
          fontSize: 12
        }
      }
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        // 调整扇形图的圆的位置
        center: ['25%', '50%'],
        data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        // 不显示指示线的文字
        label: {
          normal: {
            show: false,
            position: 'outside' // 另有参数inside，可以让数据在圆环上
          }
        },
        labelLine: { // 删除指示线
          show: false
        }
      }
    ]
  }
}
